<script setup>

import PageHeader from "@/views/Common/PageHeader.vue";
import { ref, onMounted,watch } from 'vue'
import {useRoute, useRouter} from 'vue-router'

import {getGoodsByCategoryAPI} from "@/apis/goods.js";
import SmallItemCard from "@/components/card/Small-ItemCard.vue";
import {Search} from "@element-plus/icons-vue";
import ImageClassifier from "@/components/base/imageClassifier.vue";

const route = useRoute()

const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)

const goodsList=ref([])

// 添加图片URL处理函数
const getImageUrl = (imgPath) => {
  const baseUrl = 'https://zdbackend.oss-cn-guangzhou.aliyuncs.com/20241102/product-img'
  return `${baseUrl}/${imgPath}`
}
const router=useRouter()
const CNameByRouter= router.currentRoute.value.params.categoryName

onMounted(()=>{
  getSearchResult(CNameByRouter)
  inputRef.value=CNameByRouter
})
const loading=ref(false)
watch(loading,(newValue,oldValue)=>{
  if(!newValue&&oldValue){
    getSearchResult(inputRef.value)
  }
})

const getSearchResult =async (categoryName)=>{
  const res=await getGoodsByCategoryAPI(categoryName,1,100)
  goodsList.value=res.records
  goodsList.value.forEach((item) => {
    if (typeof item.tags === "string") {
      item.tags = item.tags.split(',')
    }
  })
}

const inputRef=ref()


</script>

<template>
  <PageHeader></PageHeader>
  <div style="display: flex; justify-content: center; align-items: center;">

    <div class="logo-content" >
      <div style="display: flex">
        <div class="left">
          <img src="../../assets/logo.png" style="width: 80px; height: 80px" alt="智农销平台">
        </div>
        <div style="display:inline-grid">
          <img src="../../assets/ZhiNongXiao-green.png" style="height: 30px;padding-top: 20px;padding-left: 10px" alt="">
          <img src="../../assets/web-address2.png" style="width: 150px;height:15px;padding-bottom: 10px;padding-left: 10px" alt="">
        </div>
      </div>
    </div>

    <div class="search-tag" style="flex: 1;
          display: flex;
          justify-content: center;
          margin-right: 180px"
         v-loading="loading"
         element-loading-text="正在识别...">
      <el-input
          class="inputBar"
          v-model="inputRef"
          placeholder="请输入您要的货品"
      >

        <template #suffix>
          <image-classifier v-model:input="inputRef" v-model:loading="loading" style="margin-top: 10px;margin-right: 10px"></image-classifier>
          <el-button
              :icon="Search"
              @click="getSearchResult(inputRef)"
              style="background-color: #39bf3e;color: white;font-size: 14px">搜索</el-button>
        </template>
      </el-input>
    </div>

  </div>

  <div class="list">
    <div class="container" v-if="goodsList.length">
      <small-item-card v-for="goods in goodsList" :item="goods" @click="router.push(`/detail/${goods.gid}`)"></small-item-card>
    </div>
    <el-empty v-else description="该分类暂无商品"/>
  </div>

</template>

<style scoped lang="less">
.list{
  display: flex;
  justify-content: center;
}

.container{
  width: 1400px;
  height: auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 80px;
  gap: 20px;
}
.inputBar{
  max-width: 600px;
  height: 45px;
  font-size: 12px;
  :deep(.el-input__wrapper) {
    border-radius:10px;
    box-shadow: 0 0 0 0.45mm #39bf3e inset;
  }
}
</style>